<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <!--====== Required meta tags ======-->
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!--====== Title ======-->
        <title th:text="${news.getArticleTitle()}"></title>
        <!--====== Favicon Icon ======-->
        <script th:src="@{https://cdn.jsdelivr.net/npm/vue/dist/vue.js}"></script>
        <script th:src="@{https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js}"></script>
        <link rel="stylesheet" th:href="@{/css/search.css}">
        <!--====== Flaticon css ======-->
        <link rel="stylesheet" th:href="@{/css/flaticon.css}">
        <!--====== FontAwesome css ======-->
        <link rel="stylesheet" th:href="@{/css/all.min.css}">
        <!--====== Bootstrap css ======-->
        <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
        <!--====== magnific-popup css ======-->
        <link rel="stylesheet" th:href="@{/css/magnific-popup.css}">
        <!--====== Slick-popup css ======-->
        <link rel="stylesheet" th:href="@{/css/slick.css}">
        <!--====== Jquery UI css ======-->
        <link rel="stylesheet" th:href="@{/css/jquery-ui.min.css}">
        <!--====== Nice Select css ======-->
        <link rel="stylesheet" th:href="@{/css/nice-select.css}">
        <!--====== Animate css ======-->
        <link rel="stylesheet" th:href="@{/css/animate.css}">
        <!--====== Default css ======-->
        <link rel="stylesheet" th:href="@{/css/default.css}">
        <!--====== Style css ======-->
        <link rel="stylesheet" th:href="@{/css/style.css}">
        <!--====== Markdown css ======-->
<!--        <link rel="stylesheet" th:href="@{/css/markdown.css}">-->
<!--        <link rel="stylesheet" th:href="@{/css/article.css}">-->
        <!-- 引入 highlight.js 高亮库 -->
        <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
        <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
        <!-- 引入 clipboard.js 复制库 -->
        <script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

        <link rel="stylesheet" th:href="@{/static/highlight/styles/xcode.min.css}">
        <script th:src="@{/static/highlight/highlight.min.js}"></script>
        <script>
            hljs.initHighlightingOnLoad();
            new ClipboardJS('.copy-btn');
        </script>
        <style type="text/css">
            .article {
                width: 100%;
                max-width: 800px;
                margin: 0 auto;
                padding: 20px;
            }
            /* markdown 样式 */
            .markdown-body code {
                background-color: #f4f4f4;
                border-radius: 3px;
                font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
                margin: 0;
                padding: 0.2em 0.4em;
            }

            .markdown-body pre {
                background-color: #f4f4f4;
                border-radius: 3px;
                font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
                overflow: auto;
                padding: 10px;
            }

            .markdown-body pre code {
                background-color: transparent;
                border: none;
                margin: 0;
                padding: 0;
            }

            .markdown-body .code-wrapper {
                position: relative;
            }

            .markdown-body .copy-btn {
                position: absolute;
                right: 0;
                top: 0;
                height: 100%;
                width: 40px;
                color: #fff;
                background-color: #007bff;
                border: none;
                border-radius: 3px;
                font-size: 12px;
                text-align: center;
                cursor: pointer;
            }

            .markdown-body .copy-btn:hover {
                background-color: #0069d9;
            }
            pre code.hljs {
                display: block;
                padding: 0;
                overflow-x: auto;
                font-family: 'Consolas', 'Courier New', monospace;
                font-weight: 400;
            }



        </style>
    </head>
    <body>
        <!--====== Start Preloader ======-->
        <div class="preloader">
            <div class="loader">
                <div class="pre-shadow"></div>
                <div class="pre-box"></div>
            </div>
        </div><!--====== End Preloader ======-->
        <!--====== Search From ======-->
        <div class="modal fade search-modal" id="search-modal">
            <div class="modal-dialog modal-dialog-centered" style="width: 800px;max-width: 90%">
                <div class="modal-content">
                    <!--前台白底显示-->
                    <div id="app">
                        <div class="search-wrapper" style="border-radius:4px">
                            <div class="mb-3">
                                <span class="search-title">本地搜索</span>
                                <span class="float-right" @click="searchFlag = false">
<!--            <i class="material-icons">close</i>-->
          </span>
                            </div>
                            <div class="search-input-wrapper">
                                <!--                                <i class="material-icons">search</i>-->
                                <input v-model="keywords" placeholder="输入文章标题或内容..." style="border:none"/>
                            </div>
                            <div class="search-result-wrapper">
                                <hr class="divider" />
                                <ul>
                                    <li class="search-reslut" v-for="item of articleList" :key="item.id">
                                        <a @click="goTo(item.id)" v-html="item.articleTitle" style="text-decoration: none;border-bottom: 1px solid white;"></a>
                                        <p class="search-reslut-content text-justify" v-html="item.articleContent"></p>
                                    </li>
                                </ul>
                                <div v-show="flag && articleList.length == 0" style="font-size:0.875rem">
                                    找不到您查询的内容：{{ keywords }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--====== Search From ======-->
        <!--====== Start Header ======-->
        <header class="header-area transparent-header">
            <!--=== Header Navigation ===-->
            <div class="header-navigation navigation-two navigation-white">
                <div class="nav-overlay"></div>
                <div class="container-fluid">
                    <!--=== Primary Menu ===-->
                    <div class="primary-menu">
                        <!--=== Site Branding ===-->
                        <div class="site-branding">
                            <a th:href="@{/index}" class="brand-logo"><img th:src="@{/picture/logo-white.png}" alt="Site Logo"></a>
                        </div>
                        <!--=== Nav Inner Menu ===-->
                        <div class="nav-menu">
                            <!--=== Mobile Logo ===-->
                            <div class="mobile-logo mb-30 d-block d-xl-none text-center">
                                <a th:href="@{/index}" class="brand-logo"><img th:src="@{/picture/logo-black.png}" alt="Site Logo"></a>
                            </div>
                            <!--=== Nav Search ===-->
                            <!--                            <div class="nav-search mb-30 d-block d-xl-none ">-->
                            <!--                                <form>-->
                            <!--                                    <div class="form_group">-->
                            <!--                                        <input type="email" class="form_control" placeholder="Search Here" name="email" required="">-->
                            <!--                                        <button class="search-btn"><i class="fas fa-search"></i></button>-->
                            <!--                                    </div>-->
                            <!--                                </form>-->
                            <!--                            </div>-->
                            <!--=== Main Menu ===-->
                            <nav class="main-menu">
                                <ul>
                                    <li class="menu-item "><a th:href="@{/}">首页</a></li>
                                    <li class="menu-item has-children"><a >竞赛</a>
                                        <ul class="sub-menu">
                                            <li><a th:href="@{/front/news_list}">竞赛新闻</a></li>
                                            <li><a th:href="@{/front/notices_list}">竞赛通知</a></li>
                                            <li><a th:href="@{/front/answers_list}">竞赛题解</a></li>
                                            <li><a th:href="@{/front/gallerys_list}">竞赛现场</a></li>
                                        </ul>
                                    </li>
                                    <li class="menu-item "><a th:href="@{/front/peoples_list}">名人堂</a>
                                    </li>
                                    <li class="menu-item "><a th:href="@{/about}">竞赛报名</a>
                                    </li>
                                    <li class="menu-item"><a th:href="@{http://acm.zut.edu.cn/}">竞赛转播</a></li>
                                    <li class="menu-item"><a th:href="@{/contact}">加入我们</a></li>
                                    <li class="menu-item"><a class="search-btn" th:href="@{/}" data-bs-toggle="modal" data-bs-target="#search-modal"><i class="far fa-search"></i></a></li>
                                </ul>
                            </nav>
                            <!--=== Nav Button ===-->
                            <!--                            <div class="menu-button mt-40 d-xl-none">-->
                            <!--                                <a th:href="@{/contact}" class="main-btn btn-green">Book now<i class="far fa-angle-double-right"></i></a>-->
                            <!--                            </div>-->
                        </div>
                        <!--=== Nav right Item ===-->
                        <div class="nav-right-item d-flex align-items-center">
                            <!--                            <div class="menu-button d-xl-block d-none">-->
                            <!--                                <a th:href="@{/contact}" class="main-btn btn-green">Book now<i class="far fa-angle-double-right"></i></a>-->
                            <!--                            </div>-->
                            <li class="menu-item" style="list-style: none;margin-top: 10px">
                                <a class="search-btn" style="color: #fff;font-size: 30px;display: none;" th:href="@{/}" data-bs-toggle="modal" data-bs-target="#search-modal">
                                    <i class="far fa-search"></i>
                                </a>
                            </li>
                            <div class="navbar-toggler">
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header><!--====== End Header ======-->
        <!--====== Start Breadcrumb Section ======-->
<!--        <section class="page-banner light-red-bg pt-170 pb-170 bg_cover" th:style="'background-image: url(' + @{../image/page-bg-1.jpg} + ');'">-->
        <section class="page-banner light-red-bg pt-170 pb-170 bg_cover" th:style="'background-image: url(' + ${news.getArticleCover()} + ');'">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-10">
                        <div class="page-banner-content text-center text-white">
                       <!--     <h1 class="page-title" th:text="${news.getArticleTitle()}"></h1>-->
                            <ul class="breadcrumb-link text-white">
<!--                                <li><a th:href="@{/}">首页</a></li>-->
<!--                                <li class="active" th:href="@{/front/news_list}">竞赛新闻</li>-->

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--====== End Breadcrumb Section ======-->
        <!--====== Start Blog Details Section ======-->
        <section class="blog-details-section pt-100 pb-60" style="background-color: #f5f5f5">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-xl-8 col-lg-7" style="width: 80%;margin: auto">
                        <div class="blog-details-wrapper">
                            <div class="details-content-wrap">
                                <div class="blog-post mb-60 wow fadeInUp">
                                   <!-- <div class="post-thumbnail">
                                        <img th:src="@{/picture/blog-single-1.jpg}" alt="Blog Image">
                                    </div>-->
                                    <div class="post-meta">
                                        <ul>
    <!--                                        <li><span><a th:text="${news.getCreateTime()}"><i class="far fa-calendar-alt"></i></a></span></li>-->
    <!--                                        <li><span><a th:href="@{/index0}"><i class="far fa-comment"></i> Comments (05)</a></span></li>-->
                                        </ul>
                                    </div>
                                    <div class="main-post">
                                        <div class="entry-content" >
                                            <h3 class="title" th:text="${news.getArticleTitle()}" style="text-align: center"></h3>
                                            <div class="entry-footer wow fadeInUp">
                                                <div class="tag-links">
                                                    <h6>发布时间</h6>
                                                    <a th:text="${#temporals.format(news.getCreateTime(), 'yyyy年MM月dd日 HH:mm:ss')}"></a>
                                                    <h6>浏览量</h6>
                                                    <a th:text="${news.getViewsCount()}"></a>
                                                </div>
                                            </div>
                                            <div class="entry-content">
                                                <div th:utext="${news.getArticleContent()}"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!--====== Back To Top  ======-->
        <a th:href="@{/index0}" class="back-to-top"><i class="far fa-angle-up"></i></a>
        <!--====== Jquery js ======-->
        <script data-cfasync="false" th:src="@{/js/email-decode.min.js}"></script><script th:src="@{/js/jquery-3.6.0.min.js}"></script>
        <!--====== Bootstrap js ======-->
        <script th:src="@{/js/popper.min.js}"></script>
        <!--====== Bootstrap js ======-->
        <script th:src="@{/js/bootstrap.min.js}"></script>
        <!--====== Slick js ======-->
        <script th:src="@{/js/slick.min.js}"></script>
        <!--====== Magnific js ======-->
        <script th:src="@{/js/jquery.magnific-popup.min.js}"></script>
        <!--====== Isotope js ======-->
        <script th:src="@{/js/isotope.min.js}"></script>
        <!--====== Imagesloaded js ======-->
        <script th:src="@{/js/imagesloaded.min.js}"></script>
        <!--====== Counterup js ======-->
        <script th:src="@{/js/jquery.counterup.min.js}"></script>
        <!--====== Waypoints js ======-->
        <script th:src="@{/js/jquery.waypoints.js}"></script>
        <!--====== Nice-select js ======-->
        <script th:src="@{/js/jquery.nice-select.min.js}"></script>
        <!--====== jquery UI js ======-->
        <script th:src="@{/js/jquery-ui.min.js}"></script>
        <!--====== WOW js ======-->
        <script th:src="@{/js/wow.min.js}"></script>
        <!--====== Main js ======-->
        <script th:src="@{/js/theme.js}"></script>
        <script th:inline="javascript">
            // thymeleaf 中的变量
            var articleHref = [[${articleHref}]];

            var clipboard = null;
            var imgList = [];
            var wordNum = "";
            var readTime = "";
            var commentCount = 0;

            // thymeleaf 中的方法
            function deleteHTMLTag(content) {
                return content.replace(/<[^>]+>/g,"").replace(/&nbsp;/g, '');
            }

            function markdownToHtml(article) {
                var MarkdownIt = require("markdown-it");
                var hljs = require("highlight.js");
                var md = new MarkdownIt({
                    html: true,
                    linkify: true,
                    typographer: true,
                    breaks: true,
                    highlight: function(str, lang) {
                        // 当前时间加随机数生成唯一的id标识
                        var d = new Date().getTime();
                        if (window.performance && typeof window.performance.now === 'function') {
                            d += performance.now();
                        }
                        const codeIndex = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
                            const r = (d + Math.random() * 16) % 16 | 0;
                            d = Math.floor(d / 16);
                            return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
                        });
                        // 复制功能主要使用 clipboard.js
                        let html = `<button class="copy-btn iconfont iconfuzhi" type="button" data-clipboard-action="copy" data-clipboard-target="#copy${codeIndex}"></button>`;
                        const linesLength = str.split(/\n/).length - 1;
                        // 生成行号
                        let linesNum = '<span aria-hidden="true" class="line-numbers-rows">';
                        for (let index = 0; index < linesLength; index++) {
                            linesNum = linesNum + "<span></span>";
                        }
                        linesNum += "</span>";
                        if (lang == null) {
                            lang = "java";
                        }
                        if (lang && hljs.getLanguage(lang)) {
                            // highlight.js 高亮代码
                            const preCode = hljs.highlight(lang, str, true).value;
                            html = html + preCode;
                            if (linesLength) {
                                html += '<b class="name">' + lang + "</b>";
                            }
                            // 将代码包裹在 textarea 中，由于防止textarea渲染出现问题，这里将 "<" 用 "<" 代替，不影响复制功能
                            return `<pre class="hljs"><code>${html}</code>${linesNum}</pre><textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy${codeIndex}">${str.replace(/<\/textarea>/g, "</textarea>")}</textarea>`;
                        }
                    }
                });
                // 将markdown替换为html标签
                article.articleContent = md.render(article.articleContent);
                return article;
            }

            function getArticle() {
                axios.get("/api" + articleHref).then(function ({data}) {
                    document.title = data.data.articleTitle;
                    var article = markdownToHtml(data.data);
                    console.log(article);
                    // 统计文章字数
                    wordNum = deleteHTMLTag(article.articleContent).length;
                    // 计算阅读时间
                    readTime = Math.round(wordNum / 400) + "分钟";
                    // 添加代码复制功能
                    clipboard = new Clipboard(".copy-btn");
                    clipboard.on("success", function() {
                        alert("复制成功");
                    });
                    // 添加文章生成目录功能
                    var nodes = document.getElementById("article").children;
                    if (nodes.length) {
                        for (var i = 0; i < nodes.length; i++) {
                            var node = nodes[i];
                            var reg = /^H[1-4]{1}$/;
                            if (reg.exec(node.tagName)) {
                                node.id = i;
                            }
                        }
                    }
                    tocbot.init({
                        tocSelector: "#toc",
                        contentSelector: ".article-content",
                        headingSelector: "h1, h2, h3",
                        hasInnerContainers: true,
                        onClick: function(e) {
                            e.preventDefault();
                        }
                    });
                    // 添加图片预览功能
                    var imgList = document.getElementById("article").getElementsByTagName("img");
                    for (var i = 0; i < imgList.length; i++) {
                        imgList[i].addEventListener(
                            "click",
                            function(e) {
                                console.log(this.src);
                            },
                            false
                        );
                    }
                });
            }

            function like() {
                // 判断登录
                // 发送请求
            }

            function previewImg(img) {
                console.log(img);
            }

            function getCommentCount(count) {
                console.log(count);
            }

            getArticle();
        </script>


                                        <script>
                                            new Vue({
                                                el: "#app",
                                                data: function() {
                                                    return {
                                                        keywords: "",
                                                        articleList: [],
                                                        flag: false,
                                                        searchFlag: false
                                                    };
                                                },
                                                methods: {
                                                    goTo(articleId) {
                                                        this.searchFlag = false;
                                                        window.location.href = "/blogs/" + articleId;
                                                    }
                                                },
                                                watch: {
                                                    keywords(value) {
                                                        this.flag = value.trim() != "" ? true : false;
                                                        axios
                                                            .get("/articles/search", {
                                                                params: { current: 1, keywords: value }
                                                            })
                                                            .then(({ data }) => {
                                                                this.articleList = data.data;
                                                            });
                                                    }
                                                }
                                            });
                                        </script>
    </body>
</html>